<template>
  <div class="page-container">
    <div class="noLogin">
      <h3>您还没有登入</h3>
      <h3>
        立即去 <router-link to="/login">登入</router-link> 或者
        <router-link to="/register">注册</router-link> 安踏会员
      </h3>
    </div>
    <div class="car-main">
      <h3 class="cart-title">
        <span>我的购物车</span><i class="total-num">共 2 件</i>
      </h3>
      <div class="cart-top">
        <label class="checkbox-label checkbox-all"
          ><input type="checkbox" class="checkbox-input" /><i></i
          ><span>全选</span></label
        >
      </div>
      <template v-if="tableData">
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column label="图片" width="120">
            <template slot-scope="scope"
              ><img :src="scope.row.cache_image" alt="" class="goodImg"
            /></template>
          </el-table-column>
          <el-table-column label="商品">
            <template slot-scope="scope"
              ><span>{{ scope.row.cache_title }}</span></template
            >
          </el-table-column>
          <el-table-column label="规格">
            <template slot-scope="scope"
              ><span>{{ scope.row.cache_attr }}</span></template
            >
          </el-table-column>
          <el-table-column label="价格">
            <template slot-scope="scope">
              <a class="market_price">{{ scope.row.market_price }}</a>
              <a class="cache_price">{{ scope.row.cache_price }}</a>
            </template>
          </el-table-column>
          <el-table-column label="数量" width="200">
            <template slot-scope="scope">
              <el-input-number v-model="scope.row.add_num" :min="1" />
            </template>
          </el-table-column>
          <el-table-column label="总价">
            <template slot-scope="scope">
              {{ scope.row.cache_price * scope.row.add_num }}
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="danger" @click="deleteGood(scope.row.id_goods)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
    <div class="cart-foot">
      <div class="sum-main">
        <div class="sum-infos">
          <div class="sum-operate">
            <label class="checkbox-label checkbox-all"
              ><input type="checkbox" class="checkbox-input" /><i></i
              ><span>全选商品</span></label
            >
            <a href="javascript:;" class="delete-multi">删除商品</a>
          </div>
          <div class="sum-totalprice">
            <span>总价</span> <span class="price">￥{{total}}</span>
          </div>
        </div>
        <div class="sum-to-settle">
          <el-button type="danger">结算</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: null,
      multipleSelection: [],
      count: 0,
      total:0,
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
        // console.log(val)
        this.total=val.reduce((sum=0,item)=>{
return sum+(item.add_num*item.cache_price)
        },0)
    //   this.multipleSelection = val;
    },
    getData() {
      var dataStr = `{"status":1,"msg":"success","data":{"list":[{"id_cn":10191911,"id_shop":1,"id_goods":72842,"id_sku":1013033,"id_third":0,"id_ug":0,"session_id":"a68a99d3059a8803799d0d5fb68df743","add_num":2,"time_change":1648285139,"time_add":1648285133,"add_price":"99.00","cache_idpas":"588265,588269","cache_attr":"颜色:沙暴粉;尺码:140","cache_title":"短袖针织衫","market_price":"139.00","cache_price":"99.00","cache_image":"https:\/\/img.fishfay.com\/shopgoods\/17\/362128158\/362128158-3-1\/f3a7021a3e6102cf1050802d29f5db31.jpg","isPointGoods":0,"add_point":"0.00","guide_id":null,"onsell":"1","stock":27,"url":"\/goods-72842.html","murl":"\/m\/goods-72842.html"}],"num":2},"code":200}`;
      var res = JSON.parse(dataStr);
      // console.log(res.data.list);
      this.tableData = res.data.list;
      this.count = res.data.num;
    },
    deleteGood(id_goods) {
      // console.log(id_goods)
      this.tableData = this.tableData.filter((item) => {
        return item.id_goods != id_goods;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.page-container {
  width: 100%;
  height: 100%;
  min-height: calc(100vh - 430px);
  .noLogin,
  .car-main{
    width: 1200px;
    margin: 30px auto;
    overflow: hidden;
  }
  .noLogin {
    border: 1px solid #ddd;
    h3 {
      margin-left: 30px;
      font-weight: normal;
      font-size: 16px;
      &:first-child {
        color: red;
      }
    }
  }
  .car-main {
    .cart-title {
      height: 50px;
      line-height: 50px;
      > span {
        display: inline-block;
        position: relative;
        color: #000;
        font-size: 28px;
        font-weight: 600;
        &::before {
          content: " ";
          background: #000;
          position: absolute;
          top: 0;
          left: 0;
          width: 50px;
          height: 5px;
        }
      }
      .total-num {
        color: #ddd;
        font-size: 12px;
        margin-left: 10px;
      }
    }
  }
  .goodImg {
    width: 100px;
  }
  .market_price {
    display: block;
    text-decoration: line-through;
  }
  .cache_price {
    display: block;
  }
  .cart-foot{
      width: 100%;
      background: rgba(41, 41, 41, 0.9);
      position: fixed;
      height: 60px;
      line-height: 59px;
border-top: 1px solid #fff;
      bottom: 0;
      .sum-main{
           width: 1200px;
    margin: 0 auto;
    overflow: hidden;
    color: #fff;
          display: flex;
          >div:first-child{
              width: 1000px;
              border-right: 1px solid #fff;
              .sum-operate{
                  float: left;
              .delete-multi{
                  display: inline-block;
                  margin-left: 30px;
                  text-decoration: none;
                  color: inherit;
              }
              }
              .sum-totalprice{
                  float: right;
                  color: #fff;
                  margin-right: 20px;
              }
          }
          >div:last-child{
             margin-left: 20px;
          }
      }
      
  }
}
</style>
